<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('资产图片')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        .max{
            width:470px;
            height:470px;
            position: absolute;
            top:15px;
            left: 20%;
        }
        .hide{
            display: none;
        }
        .btn1{
            position: absolute;
            margin-top: -200px;
        }
        .show{
            display: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="padding-left: 90px">
    <div th:each="img : ${imgList}" class="imgDiv" style="display: inline-block">
        <img th:src="${img}" height="200" width="200" style="margin-right: 10px;margin-bottom: 10px;border: 1px solid lightgray" class="img"/>
        <br>
        <span class="hide" th:text="${img}"></span>
        <button class="btn btn-danger del">删除</button>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
    var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
    var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
    var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
    var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
    var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
    var bIsAndroid = sUserAgent.match(/android/i) == 'android';
    var delFlag=[[${delFlag}]];
    $(function () {
        if(!(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid)) {
            $(".img").click(function () {
                $(this).toggleClass("max");
                $(this).parent().siblings().toggleClass("hide");
                $(this).parent().find("button").toggleClass("hide");
            });
            $(".imgDiv").each(function () {
                $(this).find("button").addClass("btn1");
                $(this).find("button").addClass("hide");
               $(this).mouseenter(function () {
                   $(this).find("button").addClass("show");
                   $(this).find("button").removeClass("hide");
               }).mouseleave(function () {
                   $(this).find("button").addClass("hide");
                   $(this).find("button").removeClass("show");
               });
            });
        }
        if (!delFlag){
            $(".del").hide();
        }
        $(".btn").each(function () {
            $(this).click(function () {
                var imgPath=$(this).parent().find("span").text();
                $.modal.confirm("确定删除图片？",function () {
                    var assetId = [[${assetImgId}]];
                    var prefix = ctx + "asset/assetDetail";
                    $.operate.save(prefix+"/removeImg",{imgPath:imgPath,assetId:assetId});
                });
            })
        })
    });
    function submitHandler() {
        $.modal.close(layer.index);
    }
</script>
</body>
</html>